<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机商城</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="header">
    <div class="logo">
        <h1>手机商城</h1>
    </div>
    <div class="search-bar">
        <form id="searchForm" >
            <input type="text" id="searchInput" placeholder="请输入搜索内容...">
            <button type="submit">搜索</button>
        </form>
    </div>
</div>
<div class="results" id="results"></div>


<script>
    $(document).ready(function() {
        $("#searchForm").submit(function(event) {
            event.preventDefault();
            let searchInput = $("#searchInput").val();
            $.ajax({
                url: "/products/get",
                type: "GET",
                data: {
                    keyword: searchInput,
                },
                success: function(data) {
                    alert("查找成功！")
                    let resultsHtml = "<ul>";
                    data.forEach(function (product) {
                        resultsHtml += "<li>" + product.productName + "</li>";
                        resultsHtml += "<li>" + product.productDescription + "</li>";
                        resultsHtml += "<li>" + product.brand + "</li>";
                        resultsHtml += "<li>" + product.category + "</li>";
                        resultsHtml += "<li>" + product.price + "</li>";
                        resultsHtml += "<li>" + product.stock + "</li>"
                        resultsHtml += "<br>";
                    });
                    resultsHtml += "</ul>";
                    $("#results").html(resultsHtml);
                },
                error: function(xhr, status, error) {
                    alert("没有该数据！！")
                    console.log(error);
                }
            });
        });
    });

</script>

</body>

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f1f1f1;
    }

    .header {
        background-color: white;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: khaki;
    }

    .logo h1 {
        margin: 0;
        font-size: 2em;
        color: #333;
    }

    .search-bar form {
        display: inline-block;
        margin-top: 20px;
    }

    .search-bar input[type="text"] {
        width: 500px;
        padding: 10px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .search-bar button {
        padding: 10px 20px;
        font-size: 1em;
        border: none;
        background-color: #409EFF;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .search-bar button:hover {
        background-color: #66b1ff;
    }

    .results {
        padding: 20px;
        margin-top: 20px;
        background-color: #f1f1f1;
    }

    .result-item {
        padding: 10px;
        margin-bottom: 10px;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .result-item h2 {
        margin: 0 0 10px;
        font-size: 1.5em;
    }

    .result-item p {
        margin: 0;
        color: #555;
    }

</style>

</html>
